<template>
  <!--推荐有礼-->
  <div id="eve_recommend" v-title :data-title="$route.query.title ? $route.query.title :'推荐有礼'">
    <magic-header v-if="!isWxPublic && !isShare" :titleName="$route.params.title ? $route.params.title : '邀请好友'" :returnNative="$route.params.native">
      <span slot="title-right" class="span_right" @click="goInvitation">
        我的邀请
      </span>
    </magic-header>
    <div class="body_height">
      <section class="banner">
        <img :src="initInfo.image ? addPath(initInfo.image) : defaultImg" alt="" height="100%">
      </section>
      <!-- <div class="rule">
        <h2 class="mid_f" style=" margin-bottom: 10px;">·奖品规则</h2>
        <div v-html="initInfo.rule"></div>
      </div> -->
      <rule message="·奖品规则" :isShow="initInfo.rule !== undefined" :value="initInfo.rule" />
      <div class="draw_btn">
        <mu-raised-button label="立即邀请" backgroundColor="#f98700" :fullWidth="isTrue" @click="invitation" />
      </div>
    </div>
    <shopDetail :value="shop.mobile" :position="shop" :shopId="shop.id">
      <span slot="name">{{ shop.name }}</span>
      <span slot="address">{{ shop.address }}</span>
    </shopDetail>
  </div>
</template>
<script>
import Vue from 'vue'
import magicHeader from 'components/magicHeader'
import vfacLogo from 'assets/default_user_icon.png'
import vfhzLogo from 'assets/flagImg.png'
import shopDetail from 'components/shop-detail'
import eveRecommendService from 'services/event/eve_recommend.js'
import rule from 'components/rule'


export default {
  data() {
    return {
      defaultImg: '',
      rule: '',
      isTrue: true,
      activityId: this.$route.params.activityId,
      initInfo: {},
      shop: {},
      appname: 'vfac',
      defaultLogo: '',
      isWxPublic: false,
      isShare: false
    }
  },
  methods: {
    invitation() {
      if (this.$.userId) {
        alert(this.initInfo.image)
        let shareThumImage = this.initInfo.image || this.defaultLogo
        this.$.push('route_share', {
          shareTitle: '推荐有礼活动',
          shareContent: '这个app很有趣，快来注册下载吧~',
          shareThumImage: this.defaultImg,
          shareType: '9',
          shareUrl: '/signup/' + this.$.userId + '/' + this.activityId + '/' + this.$.shopId + '/' + this.appname,
          needOAuth: '0',
          shareId: this.activityId
        })
      } else {
        this.$.goLogin({
          shopId: this.$.shopId,
          wechat_download: true
        })
      }
    },
    goInvitation() {
      if (this.$.userId) {
        this.$router.push({ name: 'eve_Invitation', params: { activityId: this.activityId } })
      } else {
        this.$.goLogin({
          shopId: this.shop.id,
          wechat_download: true
        })
      }
    }
  },

  components: {
    magicHeader,
    shopDetail,
    rule
  },
  created() {
    //微信环境判断
    if (this.$.env === "wxPublic" || this.$.env === "webOrWechat") {
      this.isWxPublic = true;
    }

    //分享不显示标题
    if (this.$.query("from") === "singlemessage") {
      this.isShare = true;
    }

    eveRecommendService.bind(this)({
      methodName: 'RecommondInitInfo',
      id: this.$route.params.activityId
    }, res => {
      this.initInfo = res.data
      this.shop = res.shop
    }, err => {
      this.$.toast(err);
    })
    //惠众爱车显示不同默认Logo
    if (this.$.appname === 'cn.carowl.vfuhuizhong') {
      this.appname = 'vfhz'
      this.defaultImg = vfhzLogo
      this.defaultLogo = vfhzLogo
    } else {
      this.defaultLogo = vfacLogo
      this.defaultImg = vfacLogo
    }
  }
}
</script>
<style>
#eve_recommend .span_right {
  position: fixed;
  width: 100px;
  right: -33px;
  font-size: 14px;
  color: #f98700;
}
#eve_recommend .right {
  line-height: 50px;
}
#eve_recommend .banner {
  height: 150px;
  width: 100%;
  text-align: center;
  padding-top: 15px;
}
/* #eve_recommend #rule h4{
    font-size: 18px;
  } */
#eve_recommend .draw_btn {
  width: 88%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 100px;
}
#eve_recommend .draw_btn button {
  font-size: 16px;
}
#eve_recommend .body_height {
  min-height: 550px;
}
#eve_recommend #shop_detail {
  position: fixed;
  width: 100vw;
  bottom: 0;
}
#eve_recommend .footer {
      position: fixed;
    width: 100vw;
    bottom: 0;
}
#eve_recommend .footer .left {
  padding: 8px;
  color: #fff;
  background-color: #bc3833;
  height: 80px;
  line-height: 30px;
}
#eve_recommend .footer .left .info-top {
  text-align: left;
  padding-left: 10px;
}
#eve_recommend .footer .left .info-bottom {
  text-align: left;
  padding-left: 10px;
}
</style>
